<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#menu li").click(function(){
					var index = $(this).index();
					var id="";
					switch(index){
						case 0:
							id="#div1";
						break;
						case 1:
							id="#div2";
						break;    
						case 2:
							id="#div3";
						break;
						case 3:
							id="#div4";
						break;
						case 4:
							id="#div5";
						break;
						case 5:
							id="#div6";
						break;
					}
					$.scrollTo(id,1000);
				})
			})
		</script>
	</head>
	<body data-spy="scroll" data-target="#menu">
		
		<div id="menu" class="container navbar-fixed-top" style="background: #fff;">
			<ul class="nav nav-pills">
				<li><a href="#div1">第一个</a></li>
				<li><a href="#div2">第二个</a></li>
				<li><a href="#div3">第三个</a></li>
				<li><a href="#div4">第四个</a></li>
				<li><a href="#div5">第五个</a></li>
				<li><a href="#div6">第六个</a></li>
			</ul>
		</div>
		
		<div id="div1" style="height: 500px;background: #000;"></div>
		<div id="div2" style="height: 500px;background: #F00;"></div>
		<div id="div3" style="height: 500px;background: #0F0;"></div>
		<div id="div4" style="height: 500px;background: #00F;"></div>
		<div id="div5" style="height: 500px;background: #FF0;"></div>
		<div id="div6" style="height: 500px;background: #0FF;"></div>
		
	</body>
</html>
